<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>发放优惠券</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
        }
    </style>
</head>
<body class="bg-gray-100">
    <div class="mx-auto max-w-[393px] h-[852px] bg-white relative overflow-hidden rounded-[40px] shadow-2xl">
        <!-- Status Bar -->
        <div class="bg-white px-6 pt-3 pb-2">
            <div class="flex justify-between items-center text-xs">
                <span class="font-semibold">9:41</span>
                <div class="flex space-x-1">
                    <i class="fas fa-signal"></i>
                    <i class="fas fa-wifi"></i>
                    <i class="fas fa-battery-full"></i>
                </div>
            </div>
        </div>

        <!-- Header -->
        <div class="bg-gradient-to-r from-blue-500 to-indigo-500 px-4 py-3">
            <div class="flex items-center justify-between text-white">
                <a href="b2b-marketing.html" class="text-white">
                    <i class="fas fa-arrow-left text-lg"></i>
                </a>
                <h1 class="text-lg font-semibold">发放优惠券</h1>
                <button onclick="viewCouponHistory()" class="text-white hover:opacity-80">
                    <i class="fas fa-history text-lg"></i>
                </button>
            </div>
        </div>

        <!-- Content -->
        <div class="h-[calc(852px-160px)] overflow-y-auto pb-4">
            <form id="couponForm">
                <!-- Coupon Type Selection -->
                <div class="bg-white border-b border-gray-200">
                    <div class="px-4 py-4">
                        <h3 class="font-medium mb-4 flex items-center">
                            <i class="fas fa-ticket-alt text-blue-500 mr-2"></i>
                            优惠券类型
                        </h3>
                        
                        <div class="grid grid-cols-2 gap-3 mb-4">
                            <div class="coupon-type border-2 border-blue-500 bg-blue-50 rounded-lg p-3 cursor-pointer" onclick="selectCouponType('discount')">
                                <div class="flex items-center justify-center mb-2">
                                    <i class="fas fa-percentage text-blue-500 text-xl"></i>
                                </div>
                                <h4 class="text-sm font-medium text-center text-blue-600">满减券</h4>
                                <p class="text-xs text-gray-600 text-center mt-1">满X元减Y元</p>
                            </div>
                            <div class="coupon-type border-2 border-gray-200 rounded-lg p-3 cursor-pointer hover:border-blue-300" onclick="selectCouponType('percent')">
                                <div class="flex items-center justify-center mb-2">
                                    <i class="fas fa-percent text-gray-400 text-xl"></i>
                                </div>
                                <h4 class="text-sm font-medium text-center text-gray-600">折扣券</h4>
                                <p class="text-xs text-gray-500 text-center mt-1">享受X折优惠</p>
                            </div>
                        </div>

                        <input type="hidden" id="couponType" value="discount">
                    </div>
                </div>

                <!-- Coupon Settings -->
                <div class="bg-white border-b border-gray-200">
                    <div class="px-4 py-4">
                        <h3 class="font-medium mb-4 flex items-center">
                            <i class="fas fa-cog text-green-500 mr-2"></i>
                            优惠设置
                        </h3>
                        
                        <div class="space-y-4">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">券名称</label>
                                <input type="text" id="couponName" placeholder="请输入优惠券名称" 
                                       class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                            </div>

                            <!-- Discount Amount Settings -->
                            <div id="discountSettings">
                                <div class="grid grid-cols-2 gap-3">
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-2">满额条件</label>
                                        <div class="flex items-center">
                                            <span class="text-sm text-gray-600 mr-1">¥</span>
                                            <input type="number" id="minAmount" min="0" step="0.01" placeholder="100" 
                                                   class="flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                                        </div>
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-2">减免金额</label>
                                        <div class="flex items-center">
                                            <span class="text-sm text-gray-600 mr-1">¥</span>
                                            <input type="number" id="discountAmount" min="0" step="0.01" placeholder="20" 
                                                   class="flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Percent Settings (hidden by default) -->
                            <div id="percentSettings" style="display: none;">
                                <div class="grid grid-cols-2 gap-3">
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-2">折扣比例</label>
                                        <div class="flex items-center">
                                            <input type="number" id="discountPercent" min="1" max="99" placeholder="85" 
                                                   class="flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                                            <span class="ml-1 text-sm text-gray-600">折</span>
                                        </div>
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-2">最高减免</label>
                                        <div class="flex items-center">
                                            <span class="text-sm text-gray-600 mr-1">¥</span>
                                            <input type="number" id="maxDiscount" min="0" step="0.01" placeholder="50" 
                                                   class="flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Validity Period -->
                <div class="bg-white border-b border-gray-200">
                    <div class="px-4 py-4">
                        <h3 class="font-medium mb-4 flex items-center">
                            <i class="fas fa-calendar text-purple-500 mr-2"></i>
                            有效期设置
                        </h3>
                        
                        <div class="space-y-4">
                            <div class="flex space-x-3">
                                <label class="flex items-center">
                                    <input type="radio" name="validityType" value="fixed" checked class="mr-2 text-blue-500">
                                    <span class="text-sm">固定时间</span>
                                </label>
                                <label class="flex items-center">
                                    <input type="radio" name="validityType" value="relative" class="mr-2 text-blue-500">
                                    <span class="text-sm">相对时间</span>
                                </label>
                            </div>

                            <div id="fixedPeriod" class="grid grid-cols-2 gap-3">
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">开始时间</label>
                                    <input type="datetime-local" id="startDate" 
                                           class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">结束时间</label>
                                    <input type="datetime-local" id="endDate" 
                                           class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                                </div>
                            </div>

                            <div id="relativePeriod" style="display: none;">
                                <label class="block text-sm font-medium text-gray-700 mb-2">领取后几天内有效</label>
                                <div class="flex items-center">
                                    <input type="number" id="validDays" min="1" max="365" placeholder="7" 
                                           class="flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                                    <span class="ml-2 text-sm text-gray-600">天</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Distribution Settings -->
                <div class="bg-white border-b border-gray-200">
                    <div class="px-4 py-4">
                        <h3 class="font-medium mb-4 flex items-center">
                            <i class="fas fa-users text-orange-500 mr-2"></i>
                            发放设置
                        </h3>
                        
                        <div class="space-y-4">
                            <div class="grid grid-cols-2 gap-3">
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">发放总数</label>
                                    <input type="number" id="totalCount" min="1" placeholder="1000" 
                                           class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">每人限领</label>
                                    <input type="number" id="perUserLimit" min="1" placeholder="1" 
                                           class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                                </div>
                            </div>

                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">发放方式</label>
                                <div class="grid grid-cols-2 gap-2">
                                    <label class="flex items-center p-2 border border-gray-200 rounded-lg cursor-pointer hover:bg-gray-50">
                                        <input type="radio" name="distributeMethod" value="manual" checked class="mr-2">
                                        <span class="text-sm">手动发放</span>
                                    </label>
                                    <label class="flex items-center p-2 border border-gray-200 rounded-lg cursor-pointer hover:bg-gray-50">
                                        <input type="radio" name="distributeMethod" value="auto" class="mr-2">
                                        <span class="text-sm">自动发放</span>
                                    </label>
                                </div>
                            </div>

                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">适用用户</label>
                                <div class="space-y-2">
                                    <label class="flex items-center text-sm">
                                        <input type="checkbox" id="newUserOnly" class="mr-2 text-blue-500 focus:ring-blue-500">
                                        <span class="text-gray-700">仅限新用户</span>
                                    </label>
                                    <label class="flex items-center text-sm">
                                        <input type="checkbox" id="memberOnly" class="mr-2 text-blue-500 focus:ring-blue-500">
                                        <span class="text-gray-700">仅限会员用户</span>
                                    </label>
                                    <label class="flex items-center text-sm">
                                        <input type="checkbox" id="vipOnly" class="mr-2 text-blue-500 focus:ring-blue-500">
                                        <span class="text-gray-700">仅限VIP用户</span>
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Usage Rules -->
                <div class="bg-white border-b border-gray-200">
                    <div class="px-4 py-4">
                        <h3 class="font-medium mb-4 flex items-center">
                            <i class="fas fa-shield-alt text-indigo-500 mr-2"></i>
                            使用规则
                        </h3>
                        
                        <div class="space-y-4">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">适用商品</label>
                                <div class="space-y-2">
                                    <label class="flex items-center text-sm">
                                        <input type="radio" name="productScope" value="all" checked class="mr-2">
                                        <span class="text-gray-700">全部商品</span>
                                    </label>
                                    <label class="flex items-center text-sm">
                                        <input type="radio" name="productScope" value="category" class="mr-2">
                                        <span class="text-gray-700">指定分类</span>
                                    </label>
                                    <label class="flex items-center text-sm">
                                        <input type="radio" name="productScope" value="specific" class="mr-2">
                                        <span class="text-gray-700">指定商品</span>
                                    </label>
                                </div>
                            </div>

                            <div>
                                <label class="flex items-center text-sm">
                                    <input type="checkbox" id="stackable" class="mr-2 text-blue-500 focus:ring-blue-500">
                                    <span class="text-gray-700">可与其他优惠叠加使用</span>
                                </label>
                            </div>

                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">使用说明</label>
                                <textarea id="usageRules" rows="3" placeholder="请输入优惠券使用说明，如使用限制、注意事项等"
                                          class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none text-sm"></textarea>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Coupon Preview -->
                <div class="bg-white">
                    <div class="px-4 py-4">
                        <h3 class="font-medium mb-4 flex items-center">
                            <i class="fas fa-eye text-pink-500 mr-2"></i>
                            优惠券预览
                        </h3>
                        
                        <div class="bg-gradient-to-r from-blue-500 to-indigo-500 rounded-lg p-4 text-white relative overflow-hidden">
                            <div class="absolute top-0 right-0 w-8 h-8 bg-white bg-opacity-20 rounded-full -mr-4 -mt-4"></div>
                            <div class="absolute bottom-0 left-0 w-6 h-6 bg-white bg-opacity-20 rounded-full -ml-3 -mb-3"></div>
                            
                            <div class="flex items-center justify-between">
                                <div>
                                    <div class="flex items-baseline">
                                        <span class="text-xs">¥</span>
                                        <span id="previewAmount" class="text-2xl font-bold">20</span>
                                    </div>
                                    <p id="previewCondition" class="text-xs opacity-90 mt-1">满¥100可用</p>
                                </div>
                                <div class="text-right">
                                    <h4 id="previewName" class="text-sm font-medium">优惠券名称</h4>
                                    <p id="previewValidity" class="text-xs opacity-90 mt-1">有效期至2025-01-31</p>
                                </div>
                            </div>
                            
                            <div class="absolute right-4 top-1/2 transform -translate-y-1/2 border-l-2 border-dashed border-white opacity-50 h-12"></div>
                        </div>
                    </div>
                </div>
            </form>
        </div>

        <!-- Bottom Actions -->
        <div class="absolute bottom-0 left-0 right-0 bg-white border-t border-gray-200 p-4">
            <div class="flex gap-3">
                <button onclick="saveDraft()" class="flex-1 bg-gray-100 text-gray-700 py-3 rounded-lg font-medium hover:bg-gray-200 transition-colors">
                    保存草稿
                </button>
                <button onclick="distributeCoupons()" class="flex-1 bg-gradient-to-r from-blue-500 to-indigo-500 text-white py-3 rounded-lg font-medium hover:opacity-90 transition-opacity shadow-lg">
                    开始发放
                </button>
            </div>
        </div>
    </div>

    <script>
        // Coupon type selection
        function selectCouponType(type) {
            const typeElements = document.querySelectorAll('.coupon-type');
            typeElements.forEach(el => {
                el.classList.remove('border-blue-500', 'bg-blue-50');
                el.classList.add('border-gray-200');
                el.querySelector('i').classList.remove('text-blue-500');
                el.querySelector('i').classList.add('text-gray-400');
                el.querySelector('h4').classList.remove('text-blue-600');
                el.querySelector('h4').classList.add('text-gray-600');
            });

            const selectedElement = document.querySelector(`[onclick="selectCouponType('${type}')"]`);
            selectedElement.classList.remove('border-gray-200');
            selectedElement.classList.add('border-blue-500', 'bg-blue-50');
            selectedElement.querySelector('i').classList.remove('text-gray-400');
            selectedElement.querySelector('i').classList.add('text-blue-500');
            selectedElement.querySelector('h4').classList.remove('text-gray-600');
            selectedElement.querySelector('h4').classList.add('text-blue-600');

            document.getElementById('couponType').value = type;

            // Show/hide relevant settings
            if (type === 'discount') {
                document.getElementById('discountSettings').style.display = 'block';
                document.getElementById('percentSettings').style.display = 'none';
            } else {
                document.getElementById('discountSettings').style.display = 'none';
                document.getElementById('percentSettings').style.display = 'block';
            }

            updatePreview();
        }

        // Validity period toggle
        document.querySelectorAll('input[name="validityType"]').forEach(radio => {
            radio.addEventListener('change', function() {
                if (this.value === 'fixed') {
                    document.getElementById('fixedPeriod').style.display = 'grid';
                    document.getElementById('relativePeriod').style.display = 'none';
                } else {
                    document.getElementById('fixedPeriod').style.display = 'none';
                    document.getElementById('relativePeriod').style.display = 'block';
                }
            });
        });

        // Preview updates
        function updatePreview() {
            const couponType = document.getElementById('couponType').value;
            const couponName = document.getElementById('couponName').value || '优惠券名称';
            
            if (couponType === 'discount') {
                const minAmount = document.getElementById('minAmount').value || '100';
                const discountAmount = document.getElementById('discountAmount').value || '20';
                document.getElementById('previewAmount').textContent = discountAmount;
                document.getElementById('previewCondition').textContent = `满¥${minAmount}可用`;
            } else {
                const discountPercent = document.getElementById('discountPercent').value || '85';
                const maxDiscount = document.getElementById('maxDiscount').value || '50';
                document.getElementById('previewAmount').textContent = `${discountPercent}折`;
                document.getElementById('previewCondition').textContent = `最高减¥${maxDiscount}`;
            }
            
            document.getElementById('previewName').textContent = couponName;
            
            // Update validity display
            const validityType = document.querySelector('input[name="validityType"]:checked').value;
            if (validityType === 'fixed') {
                const endDate = document.getElementById('endDate').value;
                if (endDate) {
                    const date = new Date(endDate);
                    document.getElementById('previewValidity').textContent = `有效期至${date.toLocaleDateString('zh-CN')}`;
                } else {
                    document.getElementById('previewValidity').textContent = '有效期至2025-01-31';
                }
            } else {
                const validDays = document.getElementById('validDays').value || '7';
                document.getElementById('previewValidity').textContent = `领取后${validDays}天内有效`;
            }
        }

        // Add event listeners for preview updates
        document.addEventListener('DOMContentLoaded', function() {
            const previewFields = ['couponName', 'minAmount', 'discountAmount', 'discountPercent', 'maxDiscount', 'validDays', 'endDate'];
            previewFields.forEach(field => {
                const element = document.getElementById(field);
                if (element) {
                    element.addEventListener('input', updatePreview);
                }
            });

            document.querySelectorAll('input[name="validityType"]').forEach(radio => {
                radio.addEventListener('change', updatePreview);
            });

            // Set default dates
            const now = new Date();
            const tomorrow = new Date(now.getTime() + 24 * 60 * 60 * 1000);
            const nextMonth = new Date(now.getTime() + 30 * 24 * 60 * 60 * 1000);
            
            document.getElementById('startDate').value = tomorrow.toISOString().slice(0, 16);
            document.getElementById('endDate').value = nextMonth.toISOString().slice(0, 16);

            updatePreview();
        });

        // Form actions
        function saveDraft() {
            const formData = gatherFormData();
            showToast('优惠券草稿已保存');
        }

        function distributeCoupons() {
            const formData = gatherFormData();
            
            // Basic validation
            if (!formData.couponName) {
                showToast('请输入优惠券名称');
                return;
            }
            
            if (!formData.totalCount) {
                showToast('请设置发放总数');
                return;
            }

            const couponType = document.getElementById('couponType').value;
            if (couponType === 'discount') {
                if (!formData.minAmount || !formData.discountAmount) {
                    showToast('请设置满减金额');
                    return;
                }
            } else {
                if (!formData.discountPercent) {
                    showToast('请设置折扣比例');
                    return;
                }
            }

            // Success simulation
            showToast('优惠券发放成功！');
            
            setTimeout(() => {
                window.location.href = 'b2b-marketing.html';
            }, 1500);
        }

        function gatherFormData() {
            const validityType = document.querySelector('input[name="validityType"]:checked').value;
            const distributeMethod = document.querySelector('input[name="distributeMethod"]:checked').value;
            const productScope = document.querySelector('input[name="productScope"]:checked').value;
            
            return {
                couponType: document.getElementById('couponType').value,
                couponName: document.getElementById('couponName').value,
                minAmount: document.getElementById('minAmount').value,
                discountAmount: document.getElementById('discountAmount').value,
                discountPercent: document.getElementById('discountPercent').value,
                maxDiscount: document.getElementById('maxDiscount').value,
                validityType: validityType,
                startDate: document.getElementById('startDate').value,
                endDate: document.getElementById('endDate').value,
                validDays: document.getElementById('validDays').value,
                totalCount: document.getElementById('totalCount').value,
                perUserLimit: document.getElementById('perUserLimit').value,
                distributeMethod: distributeMethod,
                newUserOnly: document.getElementById('newUserOnly').checked,
                memberOnly: document.getElementById('memberOnly').checked,
                vipOnly: document.getElementById('vipOnly').checked,
                productScope: productScope,
                stackable: document.getElementById('stackable').checked,
                usageRules: document.getElementById('usageRules').value
            };
        }

        function viewCouponHistory() {
            showToast('查看优惠券发放历史');
            // In a real app, this would navigate to coupon history page
        }

        // Toast notification
        function showToast(message) {
            const toast = document.createElement('div');
            toast.className = 'fixed top-20 left-1/2 transform -translate-x-1/2 bg-gray-800 text-white px-4 py-2 rounded-lg text-sm z-50';
            toast.textContent = message;
            document.body.appendChild(toast);
            
            setTimeout(() => {
                toast.remove();
            }, 2000);
        }
    </script>
</body>
</html>